<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>科教招新系统管理后台</title>
    <link rel="stylesheet" href="static/css/base.css" />
    <link rel="stylesheet" href="static/css/index.css" />
    <!-- 引入框架 -->
    <!-- Vue + jQuery + ElementUI + CloudBase -->
    <!-- Vue -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8"></script> -->
    <script src="static/js/vue.js"></script>
    <script src="static/js/element.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="static/js/cloud.js"></script>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <style>
        .el-button--primary {
            background-color: #486b64 !important;
            border-color: #486b64 !important;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="TopNavigationBar">
            <div class="TopNav1"><img src="static\images\menu.png" alt="" /></div>
            <div class="TopNav2">
                <div class="TopNav2-a T2">
                    <img src="static/images/问好(1).png" alt="" />
                </div>
                <div class="TopNav2-b T2">
                    <img src="static/images/3.1铃铛(1).png" alt="" />
                </div>
                <div class="TopNav2-c T2">
                    <img src="static/images/头像 女孩(1).png" alt="" />
                </div>
                <div class="TopNav2-d T2">
                    <img src="static/images/择律-选择费用-倒三角形-反对.png" alt="" />
                </div>
            </div>
        </div>
        <div class="SideNavigationBar">
            <div class="Title">科教招新管理端</div>
            <ul class="SideNav_">
                <li @click="changePage" :class="currentPage=='authenticationCode'?'activeStyle':null"
                    id="authenticationCode">
                    账号管理
                </li>
                <li @click="changePage" :class="currentPage=='QRCodeManagement'?'activeStyle':null"
                    id="QRCodeManagement">
                    二维码管理
                </li>
                <li @click="changePage" :class="currentPage=='AuthenticationCodeManagement'?'activeStyle':null"
                    id="AuthenticationCodeManagement">
                    认证码管理
                </li>
                <li @click="changePage" :class="currentPage=='AppletUserManagement'?'activeStyle':null"
                    id="AppletUserManagement">
                    小程序用户管理
                </li>
                <li @click="changePage" :class="currentPage=='RegistrationFormManagement'?'activeStyle':null"
                    id="RegistrationFormManagement">
                    报名表管理
                </li>
                <li @click="changePage" :class="currentPage=='AnnouncementManagement'?'activeStyle':null"
                    id="AnnouncementManagement">
                    公告管理
                </li>
                <li @click="changePage" :class="currentPage=='BannerManagement'?'activeStyle':null"
                    id="BannerManagement">
                    banner管理
                </li>
            </ul>
        </div>
        <div id="content"></div>
    </div>
    <script>
        //将微信挂载在Window上的cloud挂载到vue实例上

        const c = window.cloud;
        Vue.prototype.cloud = c;
        Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
        Vue.config.devtools = true;
        new Vue({
            el: "#root",
            data() {
                return {
                    currentPage: "authenticationCode",
                };
            },
            methods: {
                //配置微信
                async initWx() {
                    //创建新的cloud实例
                    var c1 = new this.cloud.Cloud({
                        identityless: true,
                        // 资源方 AppID 填自己的
                        resourceAppid: "wx96f760966921f98a",
                        // 资源方环境 ID	填自己的
                        resourceEnv: "cloud1-8g54d6xb74e96e7d",
                    });
                    //初始化,使用await将异步转化为同步
                    await c1.init();
                    console.log("初始化完成");
                    this.cloud = c1;
                    this.db = this.cloud.database();
                },

                changePage(e) {
                    //点亮菜单
                    console.log(e.target.id);
                    this.currentPage = e.target.id;

                    // 拿到局部页面html
                    let pageUrl = e.target.id + ".html";
                    $.ajax({
                        type: "GET",
                        dataType: "html",
                        url: pageUrl,
                        success: function (res) {
                            // console.log(res);

                            $("#content").html(res);
                        },
                    });
                },
            },
            async created() {
                await this.initWx();
                //获取列表数据
            },
            mounted() {
                this.changePage({
                    target: {
                        id: this.currentPage,
                    },
                });
            },
        })
    </script>
</body>

</html>